<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2021/10/7
  Time: 15:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<html>
<head>
    <meta charset="UTF-8">
    <title>车型查询</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/choosecar.css">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/image/title-img1.png">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link href="${pageContext.request.contextPath}/css/footer.css" rel="stylesheet">
    <style>

        /* 头部导航的 */
        .global-header .login-page-header-nav li {
            float: left;
            margin-left: 30px;
        }

        .selected-show-color {
            color: #0a5f9a;
            background-color: #23b7b7;
        }

        .global-header .login-page-header-nav li i {
            margin-right: 10px;
            font-size: 28px;
            line-height: 1;
            color: #f6a206;
            vertical-align: middle;
        }

        .global-login-iconfont {
            font-family: "login-iconfont", serif;
            font-style: normal;
            font-weight: normal;
            cursor: default;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            *zoom: 1;
        }

        .global-header .login-page-header-nav li span {
            font-size: 14px;
            line-height: 28px;
            color: #666;
            vertical-align: middle;
        }
    </style>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index-1.css">
    <link href="${pageContext.request.contextPath}/css/headermenu.css" rel="stylesheet">
</head>
<body>
<header id="J-global-header" class="global-header">
    <div class="top-inner">
        <div id="sitenav" class="global-header-top-nav fn-clear">
            <div class="global-header-top-nav-right">
                <li class="top-nav-menu top-nav-menu-user-info" data-role="user-info" data-test="test">
                    <div class="top-nav-menu-handle">
                        <div class="login">
                            <%--                            <a href="${pageContext.request.contextPath}/login.jsp" class="J-login-btn" rel="nofollow" target="_self">登录/注册</a></div>--%>
                            <c:if test="${empty ServiceResponse}">
                                <a href="${pageContext.request.contextPath}/customer/login.jsp">登录/注册</a>
                            </c:if>

                            <c:if test="${!empty ServiceResponse}">
                                欢迎${ServiceResponse.data.custTelno}
                                <a href="${pageContext.request.contextPath}/logout">退出</a>
                            </c:if>
                        </div>
                    </div>
                </li>

                <li class="top-nav-menu top-nav-multi-menu top-nav-dl-app">
                    <div class="top-nav-menu-handle">
                        <i class="global-header-icon top-nav-dl-app-icon"></i>手机版
                    </div>
                    <div class="top-nav-menu-body top-nav-menu-qrcode">
                        <div class="top-nav-menu-bd-panel">
                            <div class="qrcode-img"></div>
                            <p>下载APP 领99元租车红包

                            </p>
                        </div>
                    </div>
                </li>

                <li class="top-nav-pipe">|</li>

                <li class="top-nav-menu top-nav-multi-menu top-nav-wx-guide">
                    <div class="top-nav-menu-handle"><i class="global-header-icon top-nav-wx-guide-icon"></i>微信</div>
                    <div class="top-nav-menu-body top-nav-menu-qrcode">
                        <div class="top-nav-menu-bd-panel">
                            <div class="qrcode-img"></div>
                            <p>扫一扫，关注微信</p>
                        </div>
                    </div>
                </li>
                <li class="top-nav-menu top-nav-multi-menu top-nav-order-lookup">
                    <div class="top-nav-menu-handle">订单查询<i class="top-nav-arrow"><em></em><span></span></i></div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <a href="${pageContext.request.contextPath}/center/myorder.jsp">订单查询</a>
                        </div>
                    </div>
                </li>
                <li class="top-nav-menu top-nav-multi-menu top-nav-order-lookup">
                    <div class="top-nav-menu-handle">个人中心<i class="top-nav-arrow"><em></em><span></span></i></div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <a href="${pageContext.request.contextPath}/center/user.jsp">进入个人中心</a>
                        </div>
                    </div>
                </li>
                <li class="top-nav-pipe">|</li>

            </div>

            <div class="global-header-top-nav-left">
                <div class="top-nav-menu top-nav-multi-menu top-nav-contact">
                    <div class="top-nav-menu-handle">
                        24小时客服！内地热线：110-120
                        <i class="top-nav-arrow"><em></em><span></span></i>
                    </div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <ul>
                                <li>
                                    <span class="title">中国内地热线</span>
                                    <a href="tel:10101020" target="_self" class="tel-number">110-120</a>
                                </li>
                            </ul>
                            <div class="top-nav-menu-bd-code">
                                <div class="qrcode-img"></div>
                                <p class="title">关注微信公众号</p>
                                <p class="text">可查询/修改/取消订单</p>
                                <a class="J-show-robot" href="javascript:" target="_self"
                                   data-tj="/公用头部/在线客服">24小时在线客服</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="toolbar fn-clear">
        <div id="slog" class="logo fn-left">
            <a class="sbx-logo" title="思必行-租车" target="_self" href="">

            </a>
        </div>
        <div class="toolbar-site-header-nav">
            <ul class="login-page-header-nav fn-clear">
                <li><i class="global-login-iconfont">&#xe909;</i><span>有驾照就能租</span></li>
                <li><i class="global-login-iconfont">&#xe906;</i><span>地图导航</span></li>
                <li><i class="global-login-iconfont">&#xe908;</i><span>24小时服务在线</span></li>
            </ul>
        </div>

    </div>
</header>

<!--导航-->
<div class="nav">
    <ul class="nav-wrap clear_float" id="J_NavBox">
        <li>
            <a href="${pageContext.request.contextPath}/index.jsp" target="_blank">首页</a>
            <span></span>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/selfrental/person_rentalcar.jsp" target="_blank">自驾租车</a>
            <span></span>
        </li>
        <li class="menu-index menu-index-on">
            <a href="${pageContext.request.contextPath}/car/car.jsp" target="_blank">车型查询</a>
            <span></span>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/memberrent/members.jsp" target="_blank">会员租车</a>
            <span></span>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/store/store.jsp" target="_blank">营业网点</a>
            <span></span>
        </li>
        <li>
            <a href="${pageContext.request.contextPath}/memberrent/wonderful_activity.jsp" target="_blank">精彩活动</a>
            <span></span>
        </li>

    </ul>

</div>

<div class="wrap">
    <div class="main-wrap">
        <!--===================查询信息表单=========================-->
        <div class="search-box">
            <div class="store-box">
                <div class="city-box-brandstep1">
                    <input class="city" type="text" value="苏州">
                    <span class="sel-city" id="PickupCity" value="苏州" autocomplete="off">[切换]<i></i></span>
                </div>
                <div class="time-box">
                    <em><img src="${pageContext.request.contextPath}/image/rili.png"></em>
                    <span>取车时间</span>
                    <div class="layui-input-inline" style="width: 150px">
                        <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input"
                               style="width: 150px" placeholder="开始日期">
                    </div>

                    <div class="layui-inline" style="width: 100px; margin-left: 20px">
                        <input type="text" class="layui-input test14" placeholder="H点m分">
                    </div>
                    <span style="margin-left: 50px">还车时间</span>
                    <div class="layui-input-inline" style="width: 150px">
                        <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input"
                               style="width: 150px" placeholder="结束日期">
                    </div>
                    <div class="layui-inline" style="width: 100px; margin-left: 20px">
                        <input type="text" class="layui-input test14" placeholder="H点m分">
                    </div>

                </div>
                <div class="btn-box">
                    <input value="查询" class="submit" type="submit">
                </div>
            </div>
        </div>
        <!--====================车辆查询主体部分========================-->
        <div class="car-warp findcar">
            <!--===============品牌列表==================-->
            <div class="brand-box">
                <div class="type-box">
                    <span>类型</span>
                    <a class="selected-show-color" href="javascript:void(0)">全部</a>
                    <a href="javascript:void(0)">经济型</a>
                    <a href="javascript:void(0)">舒适型</a>
                    <a href="javascript:void(0)">精英型</a>
                    <a href="javascript:void(0)">SUV</a>
                    <a href="javascript:void(0)">商务型</a>
                    <a href="javascript:void(0)">电动型</a>
                </div>
                <div class="brand-box-list">
                    <span>品牌</span>
                    <!--品牌标签页-->
                    <div class="tabbox">
                        <ul class="tabbtn">
                            <li class="current"><a href="${pageContext.request.contextPath}/car/car.jsp"
                                                   style="color: #666">热门</a></li>
                            <li class="all"><a href="javajavascript:void(0)"
                                               style="color: #666">全部车型</a></li>
                        </ul>
                        <div class="tabcon tab-hot">
                            <a class="selected-show-color" href="javascript:void(0)">全部</a>
                            <a href="javascript:void(0)">雪佛兰</a>
                            <a href="javascript:void(0)">大众</a>
                            <a href="javascript:void(0)">本田</a>
                            <a href="javascript:void(0)">丰田</a>
                            <a href="javascript:void(0)">标致</a>
                            <a href="javascript:void(0)">别克</a>
                            <a href="javascript:void(0)">宝马</a>
                            <a href="javascript:void(0)">大众斯柯达</a>
                            <a href="javascript:void(0)">东风</a>
                            <a href="javascript:void(0)">荣威</a>
                            <a href="javascript:void(0)">路虎</a>
                            <a href="javascript:void(0)">MG</a>
                            <a href="javascript:void(0)">上汽大通</a>
                            <a href="javascript:void(0)">一汽马自达</a>
                            <a href="javascript:void(0)">英菲尼迪</a>
                            <a href="javascript:void(0)">力帆</a>
                            <a href="javascript:void(0)">阿尔法罗密欧</a>
                            <a href="javascript:void(0)">欧拉</a>
                            <a href="javascript:void(0)">DS</a>
                            <a href="javascript:void(0)">观致</a>
                            <a href="javascript:void(0)">北京越野</a>
                            <a href="javascript:void(0)">R汽车</a>
                            <a href="javascript:void(0)">小鹏</a>
                            <a href="javascript:void(0)">日产（进口）</a>
                            <a href="javascript:void(0)">郑州日产</a>
                            <a href="javascript:void(0)">长安凯程</a>
                            <a href="javascript:void(0)">广汽埃安</a>
                            <a href="javascript:void(0)">威马</a>
                            <a href="javascript:void(0)">领克</a>
                            <a href="javascript:void(0)">星途</a>
                            <a href="javascript:void(0)">瑞风</a>
                            <a href="javascript:void(0)">上汽Marvel</a>
                            <a href="javascript:void(0)">极狐</a>
                        </div>
                        <div class="tabcon tab-all" style="display: none;">
                            <a href="javascript:void(0)">雪佛兰</a>
                            <a href="javascript:void(0)">大众</a>
                            <a href="javascript:void(0)">福特</a>
                            <a href="javascript:void(0)">本田</a>
                            <a href="javascript:void(0)">丰田</a>
                            <a href="javascript:void(0)">马自达</a>
                            <a href="javascript:void(0)">吉利</a>
                            <a href="javascript:void(0)">标致</a>
                            <a href="javascript:void(0)">别克</a>
                            <a href="javascript:void(0)">铃木</a>
                            <a href="javascript:void(0)">华晨华颂</a>
                            <a href="javascript:void(0)">雪铁龙</a>
                            <a href="javascript:void(0)">现代</a>
                            <a href="javascript:void(0)">宝马</a>
                            <a href="javascript:void(0)">奇瑞</a>
                            <a href="javascript:void(0)">比亚迪</a>
                            <a href="javascript:void(0)">奥迪</a>
                            <a href="javascript:void(0)">奔驰</a>
                            <a href="javascript:void(0)">长安</a>
                            <a href="javascript:void(0)">东南</a>
                            <a href="javascript:void(0)">福田</a>
                            <a href="javascript:void(0)">汇众</a>
                            <a href="javascript:void(0)">江淮</a>
                            <a href="javascript:void(0)">江铃</a>
                            <a href="javascript:void(0)">金杯</a>
                            <a href="javascript:void(0)">金龙</a>
                            <a href="javascript:void(0)">大众斯柯达</a>
                            <a href="javascript:void(0)">沃尔沃</a>
                            <a href="javascript:void(0)">五菱</a>
                            <a href="javascript:void(0)">宇通</a>
                            <a href="javascript:void(0)">中华</a>
                            <a href="javascript:void(0)">日产</a>
                            <a href="javascript:void(0)">长城</a>
                            <a href="javascript:void(0)">庆铃</a>
                            <a href="javascript:void(0)">金旅</a>
                            <a href="javascript:void(0)">东风</a>
                            <a href="javascript:void(0)">依维柯</a>
                            <a href="javascript:void(0)">MINI</a>
                            <a href="javascript:void(0)">东风小康</a>
                            <a href="javascript:void(0)">荣威</a>
                            <a href="javascript:void(0)">传祺</a>
                            <a href="javascript:void(0)">哈弗</a>
                            <a href="javascript:void(0)">雷克萨斯</a>
                            <a href="javascript:void(0)">起亚</a>
                            <a href="javascript:void(0)">路虎</a>
                            <a href="javascript:void(0)">斯巴鲁</a>
                            <a href="javascript:void(0)">捷豹</a>
                            <a href="javascript:void(0)">绅宝</a>
                            <a href="javascript:void(0)">克莱斯勒</a>
                            <a href="javascript:void(0)">吉普</a>
                            <a href="javascript:void(0)">Jeep</a>
                            <a href="javascript:void(0)">猎豹</a>
                            <a href="javascript:void(0)">特斯拉</a>
                            <a href="javascript:void(0)">三菱</a>
                            <a href="javascript:void(0)">道奇</a>
                            <a href="javascript:void(0)">凯迪拉克</a>
                            <a href="javascript:void(0)">奔腾</a>
                            <a href="javascript:void(0)">MG</a>
                            <a href="javascript:void(0)">上汽大通</a>
                            <a href="javascript:void(0)">启辰</a>
                            <a href="javascript:void(0)">东风风神</a>
                            <a href="javascript:void(0)">之诺</a>
                            <a href="javascript:void(0)">众泰</a>
                            <a href="javascript:void(0)">东风日产</a>
                            <a href="javascript:void(0)">东风风行</a>
                            <a href="javascript:void(0)">九龙</a>
                            <a href="javascript:void(0)">保时捷</a>
                            <a href="javascript:void(0)">宝骏</a>
                            <a href="javascript:void(0)">菲亚特</a>
                            <a href="javascript:void(0)">smart</a>
                            <a href="javascript:void(0)">北汽</a>
                            <a href="javascript:void(0)">纳智捷</a>
                            <a href="javascript:void(0)">广汽传祺</a>
                            <a href="javascript:void(0)">一汽马自达</a>
                            <a href="javascript:void(0)">玛莎拉蒂</a>
                            <a href="javascript:void(0)">英菲尼迪</a>
                            <a href="javascript:void(0)">红旗</a>
                            <a href="javascript:void(0)">阿斯顿马丁</a>
                            <a href="javascript:void(0)">扬子江</a>
                            <a href="javascript:void(0)">力帆</a>
                            <a href="javascript:void(0)">阿尔法罗密欧</a>
                            <a href="javascript:void(0)">一汽</a>
                            <a href="javascript:void(0)">腾势</a>
                            <a href="javascript:void(0)">海马</a>
                            <a href="javascript:void(0)">林肯</a>
                            <a href="javascript:void(0)">瑞驰新能源</a>
                            <a href="javascript:void(0)">雷诺</a>
                            <a href="javascript:void(0)">捷达</a>
                            <a href="javascript:void(0)">思铭</a>
                            <a href="javascript:void(0)">宝沃</a>
                            <a href="javascript:void(0)">爱驰</a>
                            <a href="javascript:void(0)">名爵</a>
                            <a href="javascript:void(0)">Polestar</a>
                            <a href="javascript:void(0)">新宝骏</a>
                            <a href="javascript:void(0)">BEIJING</a>
                            <a href="javascript:void(0)">江西五十铃</a>
                            <a href="javascript:void(0)">野马</a>
                            <a href="javascript:void(0)">捷途</a>
                            <a href="javascript:void(0)">欧拉</a>
                            <a href="javascript:void(0)">DS</a>
                            <a href="javascript:void(0)">观致</a>
                            <a href="javascript:void(0)">北京越野</a>
                            <a href="javascript:void(0)">R汽车</a>
                            <a href="javascript:void(0)">小鹏</a>
                            <a href="javascript:void(0)">日产（进口）</a>
                            <a href="javascript:void(0)">郑州日产</a>
                            <a href="javascript:void(0)">长安凯程</a>
                            <a href="javascript:void(0)">广汽埃安</a>
                            <a href="javascript:void(0)">威马</a>
                            <a href="javascript:void(0)">领克</a>
                            <a href="javascript:void(0)">星途</a>
                            <a href="javascript:void(0)">瑞风</a>
                            <a href="javascript:void(0)">上汽Marvel</a>
                            <a href="javascript:void(0)">极狐</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="car-box">
                <a target="_blank" href="brandstep.jsp" class="car-list J_car">
                    <em class=""></em>
                    <div class="car-img">
                        <img src="${pageContext.request.contextPath}/image/choosecar1.jpg" alt="大众途安"
                             style="display: inline;">
                    </div>
                    <div class="car-des">
                        <span title="大众途安">大众途安</span>
                        <i>
                            MPV
                            5座
                            自动
                        </i>
                    </div>
                </a>
                <a target="_blank" href="brandstep.jsp" class="car-list J_car">
                    <em class=""></em>
                    <div class="car-img">

                        <img src="${pageContext.request.contextPath}/image/choosecar2.jpg" alt="大众途安"
                             style="display: inline;">
                    </div>
                    <div class="car-des">
                        <span title="大众途安">大众途安</span>
                        <i>
                            MPV
                            5座
                            自动
                        </i>
                    </div>
                </a>
                <a target="_blank" href="brandstep.jsp" class="car-list J_car">
                    <em class=""></em>
                    <div class="car-img">

                        <img src="${pageContext.request.contextPath}/image/choosecar3.png " alt="大众途安"
                             style="display: inline;">
                    </div>
                    <div class="car-des">
                        <span title="大众途安">大众途安</span>
                        <i>
                            MPV
                            5座
                            自动
                        </i>
                    </div>
                </a>
                <a target="_blank" href="brandstep.jsp" class="car-list J_car">
                    <em class=""></em>
                    <div class="car-img">

                        <img src="${pageContext.request.contextPath}/image/choosecar4.png " alt="大众途安"
                             style="display: inline;">
                    </div>
                    <div class="car-des">
                        <span title="大众途安">大众途安</span>
                        <i>
                            MPV
                            5座
                            自动
                        </i>
                    </div>
                </a>
                <a target="_blank" href="brandstep.jsp" class="car-list J_car">
                    <em class=""></em>
                    <div class="car-img">

                        <img src="${pageContext.request.contextPath}/image/choosecar5.png " style="display: inline;">
                    </div>
                    <div class="car-des">
                        <span title="大众途安">大众途安</span>
                        <i>
                            MPV
                            5座
                            自动
                        </i>
                    </div>
                </a>
                <a target="_blank" href="brandstep.jsp" class="car-list J_car">
                    <em class=""></em>
                    <div class="car-img">

                        <img src="${pageContext.request.contextPath}/image/choosecar6.png " alt="大众途安"
                             style="display: inline;">
                    </div>
                    <div class="car-des">
                        <span title="大众途安">大众途安</span>
                        <i>
                            MPV
                            5座
                            自动
                        </i>
                    </div>
                </a>
                <a target="_blank" href="brandstep.jsp" class="car-list J_car">
                    <em class=""></em>
                    <div class="car-img">

                        <img src="${pageContext.request.contextPath}/image/choosecar7.png" alt="大众途安"
                             style="display: inline;">
                    </div>
                    <div class="car-des">
                        <span title="大众途安">大众途安</span>
                        <i>
                            MPV
                            5座
                            自动
                        </i>
                    </div>
                </a>
                <a target="_blank" href="brandstep.jsp" class="car-list J_car">
                    <em class=""></em>
                    <div class="car-img">

                        <img src="${pageContext.request.contextPath}/image/choosecar8.png" alt="大众途安"
                             style="display: inline;">
                    </div>
                    <div class="car-des">
                        <span title="大众途安">大众途安</span>
                        <i>
                            MPV
                            5座
                            自动
                        </i>
                    </div>
                </a>
            </div>
            <div class="pageInfo" style="font-size: 20px;text-align: center;margin-top: 30px">

            </div>
        </div>
    </div>
</div>




<script src="${pageContext.request.contextPath}/js/choosecar.js"></script>
<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '.layui-input-inline'
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            , range: ['#test-startDate-1', '#test-endDate-1']
        });
        laydate.render({
            elem: '.test14'
            , type: 'time'
            , format: 'H点m分'
        });
    });
</script>
<script>
    var carCategoryName
    var getcarBrandname;
    var getpageNum;
    //多条件查询
    $(".findcar").click(function (event) {
        var target = event.tar
    })

</script>
<%--================异步查询================--%>

<%--<ul class="carInfo" style="font-size: 20px;text-align: center;margin-top: 30px"></ul>--%>
<div id="demo0" style="margin-left: 538px ;z-index: 999 ;position: absolute;font-size: 20px;font-weight: bold"></div>
<br><br><br>
<footer class="global-footer fn-clear">

    <div class="zuche-bottom-info">
        <div class="box">
            <h3>关于</h3>
            <ul>
                <li><a rel="nofollow" href="" target="_blank">关于我们</a></li>
                <li><a rel="nofollow" href="" target="_blank">联系我们</a></li>
                <li><a rel="nofollow" href="" target="_blank">加入我们</a></li>
                <li><a rel="nofollow" href="" target="_blank">媒体报道</a></li>


            </ul>
        </div>
        <div class="box">
            <h3>条款</h3>
            <ul>
                <li><a rel="nofollow" href="" target="_blank">隐私条款</a></li>
                <li><a rel="nofollow" target="_blank" href="">用户协议</a></li>
                <li><a rel="nofollow" target="_blank" href="">信息处置制度</a></li>
                <li><a rel="nofollow" target="_blank" href="">租车规则</a></li>

            </ul>
        </div>
        <div class="box">
            <h3>帮助</h3>
            <ul>
                <li><a rel="nofollow" href="" target="_blank">客服中心</a></li>
                <li><a rel="nofollow" href="" target="_blank">互助问答</a></li>
                <li><a rel="nofollow" href="" target="_blank">常见问题</a></li>
                <li><a rel="nofollow" href="" target="_blank">出游安全提示</a></li>
            </ul>
        </div>

        <div class="box box_r">
            <div class="global-footer-icon wei-img fn-right">
                <!-- <em>微<br>信<br>公<br>众<br>号</em> -->
            </div>

            <div class="fn-right zzc_phone">
                <h4 class="service-title">客服热线</h4>
                <p class="title"><span class="sub">中国内地拨打：</span>1010-1020</p>
                <p class="text"><span class="sub">其他地区拨打： </span>+86-10-6064-1387</p>
                <a class="J-show-robot" href="javascript:;" target="_self" data-tj="/公用尾部/在线客服" style="width: auto">在线客服</a>
            </div>

        </div>

        <div class="fn-clear"></div>
    </div>
    <div class="credential">
        <h3 class="credential-title">资质证书</h3>
        <ul class="credential-list">
            <li><a href="" target="_blank" rel="nofollow"><i class="icon certificate"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon zfb_qc"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon baidu_rz"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon shi_ming"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon chengxin"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon kexin"></i></a></li>
            <li><a id="_pingansec_bottomimagesmall_shiming" href="" target="_blank" rel="nofollow"><i class="icon trustutn"></i></a></li>
        </ul>
    </div>
    <div class="copyright-box">
        <p>© 2011-2021 sbx.com&nbsp;&nbsp;思必行有限公司&nbsp;&nbsp;版权所有&nbsp;
            <a target="_blank" href="">营业执照</a>&nbsp;&nbsp;
            <a rel="nofollow" target="_blank" href="">苏ICP备114471007328号</a>&nbsp;&nbsp;
            <a rel="nofollow" target="_blank" href="" style="position: relative;padding-left: 24px;">
                <img src="" style="position: absolute;left: 0;top: -2px;">苏公网安备 44010602045644号
            </a>
        </p>
    </div>
</footer>
<script>
    <%--$(".getByPage").click(function () {--%>
    <%--    getByPage(1);--%>
    <%--});--%>
    <%--function getByPage(pageNum) {--%>

    <%--    var url = "${pageContext.request.contextPath}/ajax/car/";--%>

    <%--    $.get(url,null,function (result) {--%>
    <%--        console.log("result:"+result);  //js数据--%>
    <%--        console.log("result:"+JSON.stringify(result));  //json数据--%>
    <%--        loadCarPageDate(result);--%>
    <%--    },"json");--%>
    <%--}--%>
    <%--function loadCarPageDate(result) {--%>
    <%--    //car 数据渲染--%>
    <%--    $(".carInfo").html("");--%>
    <%--    $(".tab-hot").html("");--%>
    <%--    $(".tab-all").show();--%>
    <%--    var carArray = result.data.list;--%>
    <%--    for(var i=0;i<carArray.length;i++){--%>
    <%--        var carImgPath = carArray[i].carImgPath;--%>
    <%--        var carBrandname = carArray[i].carBrandname;--%>
    <%--        var carCategoryName = carArray[i].carCategoryName;--%>
    <%--        var carSeatnum = carArray[i].carSeatnum;--%>
    <%--        var carMatic = carArray[i].carMatic;--%>
    <%--        var liEle = ' <a target="_blank" href="brandstep.jsp" class="car-list J_car" >\n' + '<em class=""></em>\n' +--%>
    <%--            '                    <div class="car-img">\n' +--%>
    <%--            '                        <img src="'+carImgPath +'" '+'alt="'+carBrandname+'"  style="display: inline;">\n' +--%>
    <%--            '                    </div>\n' +--%>
    <%--            '                    <div class="car-des">\n' +--%>
    <%--            '                        <span title="'+carBrandname+'">'+carBrandname+'</span>\n' +--%>
    <%--            '                        <i>\n' + carCategoryName +carSeatnum+ carMatic +--%>
    <%--            '                        </i>\n' +--%>
    <%--            '                    </div>\n' +--%>
    <%--            '                </a>';--%>
    <%--        $(".carInfo").append(liEle);--%>
    <%--    }--%>
    <%--    //页码渲染--%>
    <%--    $(".pageInfo").html("");--%>
    <%--    var prePageEle = '';--%>
    <%--    if (result.data.prePage!=0){--%>
    <%--        prePageEle = '<a href="javajavascript:getByPage('+result.data.prePage+')">上一页</a>';--%>
    <%--    }--%>
    <%--    var nextPageEle ='';--%>
    <%--    if (result.data.pageNum!=result.data.pages){--%>
    <%--        nextPageEle = '<a href="javajavascript:getByPage('+result.data.nextPage+')">下一页</a>';--%>
    <%--    }--%>
    <%--    var currentPageEle = '当前是第'+result.data.pageNum+'页';--%>
    <%--    var totalPageEle = '共有'+result.data.total+'辆车，共有'+result.data.pages+'页';--%>

    <%--    // var pageEle = '<a href="">上一页</a>\n' +--%>
    <%--    //     '                当前是第xxxx页，\n' +--%>
    <%--    //     '                <a href="">下一页</a>\n' +--%>
    <%--    //     '                共有xxxx辆车，共有xxxx页';--%>
    <%--    $(".pageInfo").append(prePageEle);--%>
    <%--    $(".pageInfo").append(currentPageEle);--%>
    <%--    $(".pageInfo").append(nextPageEle);--%>
    <%--    $(".pageInfo").append(totalPageEle);--%>
    <%--}--%>


    $(".brand-box").click(function (event) {
        var target = event.target;
        var text = target.parentElement.children[0].innerText;
        var text2 = target.parentElement.parentElement.parentElement.children[0].innerText;
        // console.log(text)
        // console.log(text2);
        var type;
        var brand;

        // console.log(text);
        if (text == "类型") {
            var siblings = target.parentElement.children;
            for (var j = 0; j < siblings.length; j++) {
                siblings[j].className = '';
            }
            console.log("hello");
            target.className = "selected-show-color";
            getResult();
        } else if (text2 == "品牌") {
            var siblings = target.parentElement.children;
            for (var j = 0; j < siblings.length; j++) {
                siblings[j].className = '';
            }
            console.log("hello");
            target.className = "selected-show-color";
            getResult();
        }

        function getResult() {
            type = $(".type-box .selected-show-color").text();
            brand = $(".tabcon  .selected-show-color").text();
            console.log("brand:" + brand + "type:" + type);
            carList(type, brand, 1);
        }
    });
    /*================================异步请求=========================================*/
    carList("全部", "全部", 1);

    function carList(type, brand, pageNum) {
        var getType = type;
        var getBrand = brand;

        var url = '${pageContext.request.contextPath}/car/conditions?carCategoryName=' + type + '&carBrandname=' + brand + '&pageNum=' + pageNum;
        console.log("url:" + url);

        $.get(url, null,
            function (result) {
                console.log("result" + JSON.stringify(result));

                $(".car-box").html("");
                if (result.code == 200) {
                    var carArray = result.data.list;
                    console.log("car arr:" + carArray.length)
                    for (var i = 0; i < carArray.length; i++) {
                        var carImgPath = carArray[i].carImgPath;
                        var carBrandname = carArray[i].carBrandname;
                        var carCategoryName = carArray[i].carCategoryName;
                        var carSeatnum = carArray[i].carSeatnum;
                        var carMatic = carArray[i].carMatic;
                        var carId = carArray[i].carId;
                        // href="brandstep.jsp"
                        var liEle = ' <a href="${pageContext.request.contextPath}/brandstep/' + carId + '" target="_blank" class="car-list J_car" >\n' + '<em class=""></em>\n' +
                            '                    <div class="car-img">\n' +
                            '                        <img src="' + carImgPath + '" ' + 'alt="' + carBrandname + '"  style="display: inline;">\n' +
                            '                    </div>\n' +
                            '                    <div class="car-des">\n' +
                            '                        <span title="' + carBrandname + '">' + carBrandname + '</span>\n' +
                            '                        <i>\n' + carCategoryName + '&nbsp;&nbsp;' + carSeatnum + '座&nbsp;&nbsp;' + carMatic +
                            '                        </i>\n' +
                            '                    </div>\n' +
                            '                </a>';
                        $(".car-box").append(liEle);
                    }
                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage
                            , layer = layui.layer;
                        //总页数低于页码总数
                        laypage.render({
                            elem: 'demo0', count: result.data.pages * 10, theme: '#FF6633', curr: result.data.pageNum
                        });
                        document.querySelector("#demo0").onclick = function (event) {
                            var ele = event.target;
                            var total = result.data.total;
                            console.log("total:" + total);
                            var pages = result.data.pages;
                            console.log("pages:" + pages);
                            var prepage = result.data.prePage;
                            console.log("prepage:" + prepage);
                            var nextpage = result.data.nextPage;
                            console.log("nextPage:" + nextpage);
                            if (ele.innerText == "下一页") {
                                if (result.data.nextPage != pages)
                                    carList(type, brand, result.data.nextPage);
                            } else if (ele.innerText == "上一页") {
                                if (result.data.prePage != 0)
                                    carList(type, brand, result.data.prePage);
                            } else {
                                carList(type, brand, ele.innerText);
                            }
                        }
                    });

                    //页码渲染--%>
                    // $(".pageInfo").html("");
                    //
                    //
                    //
                    // var prePageEle = '';
                    // if (result.data.prePage != 0) {
                    //     prePageEle = "<a  style=\"color: #23b7b7;font-weight: bold\" href=\"javascript:carList('" + type + "','" + brand + "','" + result.data.prePage + "')\">上一页</a>&nbsp;&nbsp;&nbsp;&nbsp;";
                    // }
                    // var nextPageEle = '';
                    // if (result.data.pageNum != result.data.pages) {
                    //     nextPageEle = "<a  style=\"color: #23b7b7;font-weight: bold\" href=\"javascript:carList('" + type + "','" + brand + "','" + result.data.nextPage + "')\">下一页</a>&nbsp;&nbsp;&nbsp;&nbsp;";
                    // }
                    // var currentPageEle = '当前是第' + result.data.pageNum + '页&nbsp;&nbsp;&nbsp;&nbsp;';
                    // var totalPageEle = '共有' + result.data.total + '辆车，共有' + result.data.pages + '页';
                    //
                    // // var pageEle = '<a href="">上一页</a>\n' +
                    // //     '                当前是第xxxx页，\n' +
                    // //     '                <a href="">下一页</a>\n' +
                    // //     '                共有xxxx辆车，共有xxxx页';
                    // $(".pageInfo").append(prePageEle);
                    // $(".pageInfo").append(currentPageEle);
                    // $(".pageInfo").append(nextPageEle);
                    // $(".pageInfo").append(totalPageEle);
                } else {
                    $(".car-box").text("抱歉,没有查询到相关信息");
                }
            }
        )
    }

    $(".all").click(function () {
        $(".tab-hot").html("");
        $(".tab-all").show();
        carList("全部", "全部", 1);
    })
    $(".car-box").click(function (event) {
        var target = event.target;
        var carId = result.data.list.carId;
        console.log("carId: " + carId);
        var url = '${pageContext.request.contextPath}/brandstep?&carId=' + carId;
        window.location.href = url;
    })
</script>
</body>
</html>
